<template>
  <div class="c-login">
    <div class="c-center">
      <div class="c-c-left">
        <img @click="$router.push({path:'/'})" src="../../assets/img/photo.jpg" alt />
        
        <div>
          <p>用户名</p>
          <el-input v-model="account" placeholder="使用邮箱/电话/用户名登录"></el-input>
        </div>
        <div>
          <p>密码</p>
          <el-input type="password" v-model="password" placeholder="请输入正确密码"></el-input>
          <p @click="$router.push({path:'/forget'})" style="margin-top:10px;color:#0A9187;font-size:14px;cursor:pointer">忘记密码？</p>
        </div>

        <div class="c-c-l-btn">
          <el-button :loading="load" @click.native="login" type="primary">登录</el-button>
        </div>
      </div>
      <div class="c-c-right">
        <p>登录</p>
        <p>Sign in</p>
        <p>
          没有账号，
          <span @click="$router.push({path:'/register'})" style="color:#D2D0AE;cursor:pointer">注册！</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { userLogin } from "../../api/api";
import qs from "qs";
import { format } from "highcharts";
export default {
  name: "login",
  data() {
    return {
      account: "",
      password: "",
      load: false
    };
  },
  created() {},
  mounted() {},
  methods: {
    login() {
      if (this.account == "" || this.password == "") {
        this.$notify({
          title: "警告",
          message: "请输入正确的账号和密码！",
          type: "warning"
        });
        return false;
      }
      this.load = true;
      var parmas = {
        account: this.account,
        password: this.password
      };
      userLogin(qs.stringify(parmas)).then(res => {
        this.load = false;
        if (res.data.code == 200) {
          this.$store.commit("getToken", res.data.data.token);
          this.$store.commit("getUserMessage", JSON.stringify(res.data.data));
          this.$router.push({ path: "/contract" });
        } else {
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      });
    }
  }
};
</script>
<style lang='less' scope>
.c-login {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url("../../assets/img/l1-beijing.png") no-repeat;
  background-size: cover;
  .c-center {
    max-width: 1100px;
    margin: 200px auto;
    // border: 1px solid red;
    position: relative;
    .c-c-left {
      width: 800px;
      background-color: #fff;
      padding: 50px 140px 30px 100px;
      position: relative;
      > img:nth-of-type(1) {
        width: 150px;
        margin-bottom: 40px;
        cursor: pointer;
      }
      > div {
        font-size: 16px;
        color: #334d50;
        margin-bottom: 40px;
        > p {
          margin-bottom: 15px;
        }
      }
      > .c-c-l-btn {
        position: absolute;
        bottom: -60px;
        .el-button {
          border-radius: 40px;
          padding: 10px 60px;
        }
        .el-button--primary {
          background-color: #0a9187;
          border-color: #0a9187;
        }
      }
    }
    .c-c-right {
      position: absolute;
      left: 750px;
      top: 80px;
      background-color: #0a9187;
      color: #fff;
      padding: 80px 30px 50px;
      > p {
        font-size: 22px;
        margin-bottom: 15px;
      }
      > p:nth-of-type(2) {
        font-size: 26px;
        
      }
      > p:nth-of-type(3) {
        font-size: 14px;
        margin-top: 30px;
        margin-bottom: 0;
      }
    }
  }
}
</style>